<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <p>1</p>
    <p>2</p>


    <div class="a">
        <p></p>
    </div>


    <div class="b">
        <p></p>
    </div>


    <button style="display:none;">2222</button>


    <div class="box">
        <span>1</span>
        <p>22</p>
        <h2>33</h2>
        <p>333</p>
    </div>

    <div>
        <h2>11</h2>
        <p>33</p>
    </div>

    <script>

        // jq 有一个数据结构       
        // jq 是围绕着标签来做事情的  (显示隐藏元素，添加样式，删除样式...)



        // 链式操作  



        // $('button').click(function () {
        //     // $(this).addClass('active').parent().next().children().hide()
        // })



        // function MyArray() {
        //     this.el = [...arguments];
        // }

        // MyArray.prototype.push = function (v) {
        //     this.el = [...this.el, v];
        // }


        // // const arr = new Array(1, 2, 3, 4);   // [1,2,3,4]

        // const arr = new MyArray(1, 2, 3, 4);
        // arr.push(6)
        // console.log(arr);



        // jq是一个构造函数  --- 创建对象   这些对象都拥有一些属性和方法

        // const oP = document.querySelectorAll('p');

        // function hide() {
        //     for (let i = 0; i < oP.length; i++) {
        //         oP[i].style.display = 'none'
        //     }
        // }

        // function show() {
        //     for (let i = 0; i < oP.length; i++) {
        //         oP[i].style.display = 'block'
        //     }
        // }







        function Fn(el) {
            this.el = document.querySelectorAll(el);
            this.hide = function () {
                for (let i = 0; i < this.el.length; i++) {
                    this.el[i].style.display = 'none'
                }
                return this
            }

            // $('p').show()
            this.show = function () {
                for (let i = 0; i < this.el.length; i++) {
                    this.el[i].style.display = 'block'
                }
                return this
            }

            // $('p').click(function(){})
            this.click = function (cb) {
                for (let i = 0; i < this.el.length; i++) {
                    this.el[i].onclick = function (e) {
                        cb(e)
                    }
                }
                return this
            }

            // $('p').addClass('a')
            this.addClass = function (v) {
                for (let i = 0; i < this.el.length; i++) {
                    this.el[i].classList.add(v);
                }
                return this
            }

            this.removeClass = function (v) {
                for (let i = 0; i < this.el.length; i++) {
                    this.el[i].classList.remove(v);
                }
                return this
            }


            // $('p').parent().addClass('a')
            this.parent = function () {
                // 把找到的所有的父元素都存入数组   *********************
                const arr = [];
                for (let i = 0; i < this.el.length; i++) {
                    arr.push(this.el[i].parentElement);
                }
                // 研究的对象  el   变成了父元素
                this.el = arr;
                return this
            }


            this.next = function () {
                const arr = [];
                for (let i = 0; i < this.el.length; i++) {
                    this.el[i].nextElementSibling && arr.push(this.el[i].nextElementSibling);
                }
                // 研究的对象  el   变成了
                console.log(arr);
                this.el = arr;
                return this
            }

            this.siblings = function () {
                // 找到所有的兄弟们   
                const arr = [];

                for (let i = 0; i < this.el.length; i++) {
                    // 先找到爹
                    const parent = this.el[i].parentElement;
                    const children = parent.children;
                    // 找到除了自己以外的   ---- 找到下标然后删除    
                    for (let j = 0; j < children.length; j++) {
                        if (children[j] !== this.el[i]) {
                            arr.push(children[j])
                        }
                    }
                }

                this.el = arr;

                return this
            }

        }


        // const oP = new Fn('p');
        // oP.hide();


        // const oBtn = new Fn('button');
        // oBtn.show()


        // new Fn('p').hide()

        // new Fn('button').show()


        function yy(el) {
            return new Fn(el)
        }


        yy('p').hide().show()
        // yy('button').show()


        yy('p').click(function () {
            // alert(666)
            yy('button').show().addClass('a')
        })


        console.log(yy('p').next().addClass('y'));

        yy('h2').siblings().addClass('p');





        const obj = {
            name: 'cc',
            say: function () {
                console.log(1);
                return this
            },
            speak: function () {
                console.log(2);
                return obj
            }
        }

        obj.say();
        obj.speak()


        obj.say().speak()





    </script>

</body>

</html>